<template>
  <c-roll class="c-mfr-view-info">
    <c-row-view :title="multLang('tab_info_a')">
      <template #opn>
        <c-row-view-opn
          :auth="auth"
          :visible="infoVisible"
          @update:visible="visibles.info = $event"
          @cancel="infoCancel"
          @save="infoSave"
        >
        </c-row-view-opn>
      </template>
      <el-form
        :model="infoForm"
        :rules="infoRules"
        ref="infoForm"
        label-width="120px"
        :validate-on-rule-change="false"
      >
        <c-row :col="4">
          <c-col>
            <el-form-item :label="multLang('title_pv', ':')" prop="short_title">
              <c-form-edit :visible="infoVisible">
                <template #edit>
                  <el-input
                    v-model="infoForm.short_title"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <c-text-long>
                  {{ infoForm.short_title }}
                </c-text-long>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_pw', ':')" prop="parent_id">
              <c-form-edit :visible="infoVisible">
                <template #edit>
                  <!-- clearable -->
                  <c-select
                    v-model="infoForm.parent_id"
                    :options="allFacilitiesList"
                    clearable
                    :placeholder="multLang('title_aaad_h')"
                  ></c-select>
                </template>
                <span>{{ allFacilitiesMap[infoForm.parent_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_px', ':')" prop="address">
              <c-form-edit :visible="infoVisible">
                <template #edit>
                  <el-input
                    v-model="infoForm.address"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <c-text-long>
                  {{ infoForm.address }}
                </c-text-long>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item :label="multLang('title_py', ':')" prop="currency_id">
              <c-form-edit :visible="infoVisible">
                <template #edit>
                  <c-select
                    v-model="infoForm.currency_id"
                    :options="currencyList"
                    clearable
                    :placeholder="tplLang('text_choose_a', ['title_py'])"
                  ></c-select>
                </template>
                <span>{{ currencyMap[infoForm.currency_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col>
            <el-form-item
              :label="multLang('title_category_ab_k', ':')"
              prop="org_type_id"
            >
              <c-form-edit :visible="infoVisible">
                <template #edit>
                  <c-select
                    v-model="infoForm.org_type_id"
                    :options="orgTypeList"
                    clearable
                    :placeholder="
                      tplLang('text_choose_a', ['title_category_ab_k'])
                    "
                  ></c-select>
                </template>
                <span>{{ orgTypeMap[infoForm.org_type_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
          <c-col :col="11">
            <el-form-item :label="multLang('title_ck', ':')" prop="remark">
              <c-form-edit :visible="infoVisible" long>
                <template #edit>
                  <c-input-text v-model="infoForm.remark"></c-input-text>
                </template>
                <span>{{ infoForm.remark }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
    </c-row-view>
  </c-roll>
</template>
<script>
import { ObjectCopy } from '@/util'
import { editMfrData } from '@/http/api/v1/mfr'
export default {
  name: 'CMfrViewInfo',
  components: {},
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    auth: { type: Boolean, default: false }
  },
  data() {
    return {
      visibles: {
        info: false
      },
      infoForm: {
        sectionType: 'facilitiesBase',
        short_title: '',
        parent_id: '',
        address: '',
        currency_id: '',
        org_type_id: '',
        remark: ''
      }
    }
  },
  computed: {
    allFacilitiesList() {
      return this.optionList('all_facilities')
    },
    currencyList() {
      return this.optionList('currency')
    },
    orgTypeList() {
      return this.optionList('org_type')
    },
    allFacilitiesMap() {
      return this.optionMap('all_facilities')
    },
    currencyMap() {
      return this.optionMap('currency')
    },
    orgTypeMap() {
      return this.optionMap('org_type')
    },
    infoVisible() {
      return this.auth && this.visibles.info
    },
    infoRules() {
      return {
        short_title: {
          required: true,
          message: this.multLang('title_pv', 'msg_g'),
          trigger: 'blur'
        }
        // parent_id: {
        //   required: true,
        //   validator: (_, __, cb) => cb(),
        //   trigger: 'change'
        // }
      }
    }
  },
  watch: {
    info: {
      deep: true,
      handler(val) {
        this.copyData(this.infoForm, val)
        this.$nextTick().then(() => this.$refs.infoForm.clearValidate())
      }
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'org_type' })
    this.setOption({ key: 'currency' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    const { id } = this.info
    this.setOption({ key: 'all_facilities', option: { id } })
    console.log(this.$route)
    const {
      params: { edit }
    } = this.$route
    edit && (this.visibles.info = false)
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    query() {
      this.$emit('query')
    },
    copyData(data, raw) {
      return ObjectCopy(data, raw, {
        skip: 'sectionType'
      })
    },
    infoCancel() {
      this.copyData(this.infoForm, this.info)
      this.visibles.info = false
      this.$nextTick().then(() => this.$refs.infoForm.clearValidate())
    },
    infoSave() {
      const { id } = this.info
      this.$refs.infoForm.validate(
        valid =>
          valid &&
          editMfrData({ id, ...this.infoForm }).then(() => {
            this.visibles.info = false
            this.$emit('query')
          })
      )
    }
  }
}
</script>
<style lang="scss">
.c-mfr-view-info {
}
</style>
